<template>
  <div class="film-detail">
    <div class="film-poster">
      <img :src="currentList.poster" alt="">
    </div>
    <div class="film-detail">
      <div class="col">
        <div class="film-name">
          <span class="name">{{ currentList.name }}</span>
          <span class="item">{{ currentList.filmType.name }}</span>
        </div>
        <div class="film-grade">
          <span class="grade">{{ currentList.grade }}</span>
          <span class="grade-text">分</span>
        </div>
      </div>

      <div class="film-category grey-text">{{ currentList.category }}</div>
      <div class="film-premiere-time grey-text">
        2018-12-07上映
      </div>
      <div class="film-nation-runtime grey-text">
        {{ currentList.nation }}  | {{ currentList.runtime }}
      </div>
      <div class="film-synopsis grey-text">
       {{ currentList.synopsis }}
      </div>
      <div class="box">
      </div>
      <div class="actors">
        <div class="actors-title-bar">
          <span class="actors-title-text">
            演职人员
          </span>
      </div>
    </div>     
      <div class="actors-list">
          <ul>
            <li>
              <img :src="currentList.actors[0].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[0].name }} </span>
              <span class="actors-role"> {{ currentList.actors[0].role }}</span>
            </li>
           <li>
              <img :src="currentList.actors[1].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[1].name }} </span>
              <span class="actors-role"> {{ currentList.actors[1].role }}</span>
            </li>
            <li>
              <img :src="currentList.actors[2].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[2].name }} </span>
              <span class="actors-role"> {{ currentList.actors[2].role }}</span>
            </li>
            <li>
              <img :src="currentList.actors[3].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[3].name }} </span>
              <span class="actors-role"> {{ currentList.actors[3].role }}</span>
            </li>
            <li>
              <img :src="currentList.actors[4].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[4].name }} </span>
              <span class="actors-role"> {{ currentList.actors[4].role }}</span>
            </li>
            <li>
              <img :src="currentList.actors[5].avatarAddress" alt="">
              <span class="actors-name">{{ currentList.actors[5].name }} </span>
              <span class="actors-role"> {{ currentList.actors[5].role }}</span>
            </li>
          </ul>
        </div>
    </div>
    <div class="photos">
      <div class="photos-title-bar">
        <span class="photos-title-text">剧照</span>
        <span class="photos-to-all">全部(6)</span>
      </div>
      <div class="photos-list">
        <ul>
          <li>
            <img :src="currentList.actors[0].avatarAddress" alt="">
          </li>
          <li>
            <img :src="currentList.actors[1].avatarAddress" alt="">
          </li>
          <li>
            <img :src="currentList.actors[2].avatarAddress" alt="">
          </li>
          <li>
            <img :src="currentList.actors[3].avatarAddress" alt="">
          </li>
          <li>
            <img :src="currentList.actors[4].avatarAddress" alt="">
          </li>
          <li>
            <img :src="currentList.actors[5].avatarAddress" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilmDetail',
  data () {
    return {
      currentList: ''
    };
  },

  methods: {
    getFilmdetail () {
      const currentId = this.$route.params.filmId;
      let filmArr = this.$store.state.filmsList;
      filmArr.map((item, index) => {
        if (item.filmId === currentId) {
          this.currentList = item;
        }
      });
    }
  },

  created () {
    this.getFilmDetail();
  },

  beforeRouteEnter (to, from, next) {
    next();
  },

  beforeRouteUpdate (to, from, next) {
    this.getFilmDetail();
    next();
  },

  beforeRouteLeave (to, from, next) {
    next();
  }
};
</script>

<style lang="scss">
@import "@/styles/common/px2rem.scss";

.film-detail {
  flex: 1;
  overflow-y: auto;

  .film-poster {
    height: px2rem(210);
    img {
      width: 100%;
      height: 100%;
    }
  }

  .film-detail {
    background-color: #fff;

    .col {
      padding: 0 px2rem(15);
      display: flex;
      align-items: center;
    }

    .film-name {
      flex: 1;
      display: flex;
      align-items: center;

      .name {
        color: #191a1b;
        font-size: px2rem(18);
        height: px2rem(24);
        line-height: px2rem(24);
        margin-right: px2rem(8);
      }

      .item {
        font-size: px2rem(12);
        color: #fff;
        background-color: #d2d6dc;
        height: px2rem(14);
        line-height: px2rem(14);
        padding: 0 px2rem(2);
        border-radius: px2rem(2);
        display: inline-block;
      }
    }

    .film-grade {
      flex-shrink: 0;
      width: px2rem(100);
      text-align: right;
      color: #ffb232;
      font-size: px2rem(12);

      .grade {
        font-size: px2rem(18);
        font-style: italic;
      }
    }

    .grey-text {
      height: 38px;
      overflow-y: auto;
      padding: 0 px2rem(15);
      font-size: px2rem(13);
      line-height: px2rem(20);
      color: #797d82;
      margin-top: px2rem(4);
    }

    .film-synopsis {
      padding: 0 px2rem(15);
      overflow: hidden;
      overflow-y: auto;
      &.hide {
        height: px2rem(40);
      }
    }

    .toggle {
      text-align: center;
      &.hide {
        i {
          transform: translate(180deg);
        }
      }
    }
    .box {
      height: 10px;
      background-color: #f4f4f4;
    }
    .actors {
      width: 100%;
    }
    .actors-title-bar {
      width: 100%;
      padding: 15px;
    }
    .actors-list {
      width: 100%;
      height: 140px;
      overflow-x: scroll;
      overflow-y: none;
      border-bottom: 10px solid #eee;
      ul {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        height: 100%;
        margin: 0;
        padding-left: 15px;
        list-style: none;
        li {
          width: 85px;
          height: 100%;
          min-width: 85px;
          margin-right: 10px;
          .actors-name {
            text-align: center;
            display: block;
            padding-top: 10px;
            font-size: 12px;
            color: #191a1b;
            width: 85px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .actors-role {
            text-align: center;
            display: block;
            font-size: 10px;
            color: #797d82;
          }
          img {
            width: 100%;
          }
        }
      }
    }
  }
  .photos {
    margin-top: 10px;
    background-color: #fff;
    .photos-title-bar {
      height: 62px;
      width: 100%;
      padding: 15px;
      .photos-title-text {
        font-size: 16px;
        text-align: left;
        color: #191a1b;
      }
      .photos-to-all {
        font-size: 13px;
        color: #797d82;
        float: right;
      }
    }
    .photos-list {
      height: 115px;
      background: rgb(255, 255, 255);
      overflow-x: auto;
      ul{
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        li{
          width: 85px;
          height: 100%;
          min-width: 85px;
          margin-right: 10px;
          img{
            width:100%;
          }
        }
      }
    }
  }
}
</style>
